<template>
	<div class="send-message send-message-box" v-if="value">
		<p class="title text-lf" v-if="!form.isEdit"><span>* </span>请选择相关业务</p>
		<el-form-item :prop="`${prop}.type`" required="true">
			<div class="send-content text-lf boder">
				<!-- <template v-if="!form.isEdit"> -->
				<!-- <el-form-item  prop="type"> -->
				<div class="radio" v-for="item in businessData" :key="item.id">
					<el-radio :label="item.type" @change="changeType" v-model="form.type">{{ item.title }}</el-radio>
					<span>{{ item.desc }}</span>
					<div class="radio-desc" v-if="form.type == item.type">
						<div class="video" v-if="item.type === 'sendVideo'">
							<!-- :prop="`${prop}.inputUrl`"  :rules="rules.inputUrl"-->
							<!-- <el-form-item label="视频地址" :prop="`${prop}.inputUrl`">
								<el-input v-model="form.inputUrl" :disabled="showDetail" @input="updateInput"></el-input>
							</el-form-item> -->
							<el-form-item label="选择视频" :prop="`${prop}.uploadUrl`">
								<el-select v-model="form.uploadUrl" placeholder="请选择要推送的视频文件" @change="onVideoChange">
									<el-option v-for="item in videoUrls" :key="item.id" :label="item.title" :value="item.content"> </el-option>
								</el-select>
							</el-form-item>
							<p class="send-message-tips" v-for="item in form.fileList" :key="item.id">
								<a v-html="item.url" :href="item.url" target="_blank"> </a>
							</p>
							<!-- <el-form-item label="本地视频" prop="name">
								<el-upload
									:class="showDetail ? 'disable' : ''"
									:action="uploadConfig.url"
									:headers="uploadConfig.headers"
									:on-preview="preview"
									:before-upload="uploadFile"
									:on-remove="remove"
									:on-success="uploadSuccess"
									:on-error="uploadError"
									:before-remove="beforeRemove"
									multiple
									accept=".mp4"
									:on-progress="progress"
									:file-list="form.fileList"
									:limit="1"
									list-type="text"
								>
									<div class="upload-btn">
										<i class="el-icon-upload"></i>
										<span>上传视频</span>
									</div>
								</el-upload>
							</el-form-item> -->
						</div>
						<!-- <p class="send-message-tips" v-for="(tip, index) in item.tips" :key="index">
							<span v-if="item.type === 'sendVideo' || item.type === 'sendPage'">{{ tip }}</span>
						</p> -->
						<div class="page" v-if="item.type === 'sendPage'">
							<el-form-item label="链接地址" :prop="`${prop}.webUrl`" required="true">
								<el-input v-model="form.webUrl" :disabled="showDetail" @input="updateInput"></el-input>
							</el-form-item>
						</div>
						<div class="wordage" v-if="form.type === 'sendRichText'">
							<el-form-item label="" :prop="`${prop}.wordage`">
								<WangEditor
									id="wangEditorTextArea"
									ref="wangEditorTextArea"
									v-model="form.wordage"
									:wordage="form.wordage"
									@onChange="changeText"
									:class="{ valdateBorder: changeBorder }"
									:showDetail="showDetail"
									:uploadConfig="uploadConfig"
								/>
								<el-button icon="el-icon-plus" class="textarea-btn" type="text" @click.prevent="onAddVariable('wangEditorTextArea', form.wordage)" v-if="!showDetail"></el-button>
							</el-form-item>
						</div>
						<div v-if="form.type === 'sendPdf'" class="pdf-box">
							<el-form-item label="选择PDF" :prop="`${prop}.uploadPdfUrl`">
								<el-select v-model="form.uploadPdfUrl" placeholder="请选择要推送的PDF文件" @change="onPdfChange">
									<el-option v-for="item in pdfUrls" :key="item.id" :label="item.title" :value="item.content"> </el-option>
								</el-select>
							</el-form-item>
							<p class="send-message-tips" v-for="item in form.pdfList" :key="item.id">
								<a v-html="item.url" :href="item.url" target="_blank"> </a>
							</p>
							<!-- <el-form-item label="本地文件" :prop="`${prop}.uploadPdfUrl`" required="true">
								<el-upload
									:class="showDetail ? 'disable' : 'upload-conent'"
									:action="uploadConfig.url"
									:headers="uploadConfig.headers"
									:on-preview="previewPdf"
									:before-upload="uploadPdf"
									:on-remove="removePdf"
									:on-success="uploadSuccessPdf"
									:on-error="uploadErrorPdf"
									:before-remove="beforeRemove"
									multiple
									accept="application/pdf"
									:on-progress="progress"
									:file-list="form.pdfList"
									:limit="1"
									list-type="text"
								>
									<div class="upload-btn">
										<i class="el-icon-upload"></i>
										<span>上传PDF</span>
									</div>
								</el-upload>
							</el-form-item> -->
							<!-- <p class="send-message-tips"> {{ explain }} </p> -->
						</div>
					</div>
				</div>
			</div>
		</el-form-item>
		<!-- 用户变量 -->
		<UserAttribute v-if="isShowUserAttribute" :dialogVisible="isShowUserAttribute" @on-ok="onChosseUserAttribute" @on-cancel="onCloseUserAttribute" />
	</div>
</template>

<script>
import WangEditor from '@/views/bpmn/components/workflow/WangEditor.vue';
import UserAttribute from './UserAttribute.vue';
import { getVariablesAll, getBusinessResourcesBySceneId } from '@/api/api.js';
export default {
	components: { WangEditor, UserAttribute },
	name: 'sendContents',
	props: {
		modalValue: {
			type: Object,
			default: () => {}
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		},
		value: {
			type: Object,
			required: true,
			default: () => {}
		},
		prop: {
			type: String,
			required: true,
			default: () => ''
		}
	},
	data() {
		return {
			form: {
				url: '',
				next: '', //下一步
				size: 0, //推送视频的大小
				fileName: '', //bpm确定保存之后的节点框<推送富文本:>文案，类似于其他模板的第一个Ai说
				originalname: '', //服务器返回的原视频地址名字
				fileList: [], //本地视频
				uploadUrl: '', //上传本地视频
				inputUrl: '', //推送视频地址输入框
				type: '', //选择的相关类型 ：send_video=推送视频，send_page=推送网页，send_richText=推送富文本
				isEdit: false, //Radio 单选框选择的相关业务类型默认隐藏，
				wordage: '', //推送富文本的内容
				textData: '', //富文本的内容1500个字
				wordsVariableId: '',
				wordsVariables: [],
				pdfList: [], //pdf
				uploadPdfUrl: '',
				webUrl: '', //推送网页的链接地址
				id: ''
			},
			isShowUserAttribute: false,
			nextOptions: [],
			workstep: {},
			businessData: [
				{
					id: 1,
					type: 'sendVideo',
					title: '推送视频',
					desc: '（AI客服推送一个视频片段给客户，可根据具体业务推送相应的业务视频给客户阅览）',
					tips: ['备注: 推送视频支持网络视频 url 和本地上传，请保证网络视频是 *.mp4 格式!', '说明: 同时只支持一种方式,上传本地文件需等进度条消失,文件名显示才表示上传成功!']
				},
				{
					id: 2,
					type: 'sendPage',
					title: '推送网页',
					desc: '(AI客服推送一个网页链接给用户,可根据具体业务推送相应的业务网页给用户填写!)',
					videoSrc: '',
					tips: ['示例地址:', 'https://www.zealcomm.cn', 'https://www.zealcomm.com']
				},
				{
					id: 3,
					type: 'sendRichText',
					title: '推送富文本',
					desc: '(AI客服推送一段文字给访客，等待访客查看确认)',
					videoSrc: '',
					tips: ['']
				},
				{
					id: 4,
					type: 'sendPdf',
					title: '推送PDF',
					desc: '(AI客服推送一个PDF文件给访客供访客查看)',
					videoSrc: '',
					tips: []
				}
			],
			changeBorder: false,
			explain: '说明:仅支持上传单个文件,上传本地文件需等进度条消失,文件名显示才表示上传成功',
			uploadStatus: 'idle',
			// 内容推送上传配置token，上传地址
			uploadConfig: {
				token: localStorage.getItem(`zco_admin_token_${window.uid}`),
				url: `${loginUrl}/ivcs/api/v1/upload`,
				headers: { 'x-access-token': localStorage.getItem(`zco_admin_token_${window.uid}`) }
			},
			variablesList: [], // 变量列表
			videoUrls: [
				{
					id: 1,
					content: 'https://note.youdao.com/web/#/file/WEB010679b7e7b5bed0b443e72aafee1610/note/WEB76cb74ece2799843236aa210ace1e0c7/',
					title: '视频1'
				},
				{
					id: 2,
					content: 'https://note.youdao.com/web/#/file/WEB010679b7e7b5bed0b443e72aafee1610/note/WEB76cb74ece27236aa210ace1e0c7/',
					title: '视频2'
				}
			],
			pdfUrls: [
				{
					id: 1,
					content: 'https://note.youdao.com/web/#/file/WEB010679b7e7b5bed0b443e72aaf610/note/WEB76cb74ece2799843236aa210ace1e0c7/',
					title: 'pdf1'
				},
				{
					id: 2,
					content: 'https://note.youdao.com/web/#/file/WEB010679b7e7b5bed0b443e72aafee1610/note/WEB76cb74ece2799843236aa210ace1e0c7/',
					title: 'pdf2'
				}
			]
		};
	},
	watch: {
		value: {
			handler(val) {
				this.form = {
					url: '',
					next: '', //下一步
					size: 0, //推送视频的大小
					fileName: '', //bpm确定保存之后的节点框<推送富文本:>文案，类似于其他模板的第一个Ai说
					originalname: '', //服务器返回的原视频地址名字
					fileList: [], //本地视频
					uploadUrl: '', //上传本地视频
					inputUrl: '', //推送视频地址输入框
					type: '', //选择的相关类型 ：send_video=推送视频，send_page=推送网页，send_richText=推送富文本
					isEdit: false, //Radio 单选框选择的相关业务类型默认隐藏，
					wordage: '', //推送富文本的内容
					textData: '', //富文本的内容1500个字
					wordsVariableId: '',
					wordsVariables: [],
					pdfList: [], //pdf
					uploadPdfUrl: '',
					webUrl: '', //推送网页的链接地址
					id: ''
				};
				this.form = { ...this.form, ...this.value };
				console.log('this.value', this.value, this.form);
				if (this.form.uploadPdfUrl.length > 0) {
					console.log('11', this.form.uploadPdfUrl);
					this.form.uploadPdfUrl = this.form.uploadPdfUrl.split('?')[0] + '?token=' + localStorage.getItem(`zco_admin_token_${window.uid}`);
				}
				if (this.form.uploadUrl.length > 0) {
					console.log('22', this.form.uploadUrl);
					this.form.uploadUrl = this.form.uploadUrl.split('?')[0] + '?token=' + localStorage.getItem(`zco_admin_token_${window.uid}`);
				}
			},
			deep: true
		}
	},
	mounted() {
		// this.initModalData();
		this.$nextTick(() => {
			this.form = { ...this.form, ...this.value };
			console.log('this.value：', this.value, this.form);
			if (this.form.uploadPdfUrl.length > 0) {
				console.log('11', this.form.uploadPdfUrl);
				this.form.uploadPdfUrl = this.form.uploadPdfUrl.split('?')[0] + '?token=' + localStorage.getItem(`zco_admin_token_${window.uid}`);
			}
			if (this.form.uploadUrl.length > 0) {
				console.log('22', this.form.uploadUrl);
				this.form.uploadUrl = this.form.uploadUrl.split('?')[0] + '?token=' + localStorage.getItem(`zco_admin_token_${window.uid}`);
			}
		});
		this.getVariablesAll();
		this.getBizMaterialList('video');
		this.getBizMaterialList('document');
	},
	computed: {
		getTips() {
			return this.businessData.filter(item => item.type === this.form.type).map(item => item.tips)[0];
		}
	},
	methods: {
		uploadFile(file) {
			let name = file.name.substring(file.name.length - 3, file.name.length);
			let fileName = name.toLowerCase();
			if (fileName !== 'mp4' && fileName !== 'mov') {
				this.$message.error('上传失败，仅支持上传 .mp4/.mov 格式的视频文件！');
				return false;
			}
			this.form.fileName = file.name;
			this.form.originalname = file.name;
			this.form.size = file.size;
		},

		preview() {},
		remove(file) {
			if (file.status === 'success') {
				this.form.fileList.splice(this.form.fileList.indexOf(file.name), 1);
				console.log(this.form.fileList);
			}
			this.form.originalname = '';
		},
		beforeRemove() {},
		progress(event, file) {
			if (event.percent === 100) {
				this.form.fileName = file.name;
				this.form.originalname = file.name;
				this.form.size = file.size;
			}
		},
		uploadSuccess(response) {
			if (response.code === 200) {
				this.form.uploadUrl = response.data.url;
				this.form.servletFileName = response.data.filename;
				this.form.fileList.push({
					name: this.form.fileName,
					url: this.form.url
				});
				this.form.fileName = response.data.filename;
				this.form.url = response.data.url;
				this.$message.success('文件上传成功！');
				this.$emit('input', this.prop, this.form);
				this.$emit('input', 'resource', { name: this.form.originalname, size: this.form.size, url: this.form.url });
			}
		},
		uploadError(error) {
			console.log(error);
		},
		changeType(type) {
			console.log('changeType ', this.form, type);
			this.form['type'] = type;
			this.$emit('input', this.prop, this.form);
			// 上传视频
			if (type === 'sendVideo') {
				// { name: fileName, url: content, size: fileSize }
				if (this.form.fileList.length > 0) {
					const { url, name, size, id } = this.form.fileList[0];
					this.form.fileName = name;
					this.form.originalname = name;
					this.form.size = size;
					this.form.url = url;
					this.form.id = id;
				}
				this.$emit('input', 'resource', { name: this.form.originalname, size: this.form.size, url: this.form.url, id: this.form.id });
			}
			// 链接地址
			if (type === 'sendPage') {
				this.form.url = this.form.webUrl;
				this.form.fileName = '';
				this.form.originalname = '';
				this.$emit('input', 'resource', { url: this.form.url });
			}
			// 富文本
			if (type === 'sendRichText') {
				this.$emit('input', 'resource', { attachments: this.form.wordage, content: this.form.textData, type: this.form.type });
			}
			// 上传pdf
			if (type === 'sendPdf') {
				// { name: fileName, url: content, size: fileSize }
				if (this.form.pdfList.length > 0) {
					const { url, name, size, id } = this.form.pdfList[0];
					this.form.fileName = name;
					this.form.originalname = name;
					this.form.size = size;
					this.form.url = url;
					this.form.id = id;
				}
				this.$emit('input', 'resource', { name: this.form.originalname, size: this.form.size, url: this.form.url, uploadPdfUrl: this.form.url, id: this.form.id });
			}
		},

		changeText(html, text) {
			this.form.wordage = html;
			this.form.textData = text;
			console.log(this.form.textData, 'textData ');
			console.log(this.form.wordage, 'wordage');
			this.$emit('input', this.prop, this.form);
			// this.$emit('input', 'resource', { name: this.form.originalname, size: this.form.size, url: this.form.url });
		},

		getImageData() {
			let element = this.$refs.textarea.editor || this.$refs.textarea[0].editor;
			let imageArr = this.$refs.textarea.imageData || this.$refs.textarea[0].imageData;
			let linkImageArr = this.$refs.textarea.linkImgData || this.$refs.textarea[0].linkImgData;
			let wordJson = element.txt.getJSON();
			console.log(wordJson);
			let imageData = [];
			if (wordJson) {
				wordJson
					// wordJson 类型包含对象 ，也可能是字符串  例如 ：[{...} , 'String']
					.map(v => v.children && v.children && typeof children === 'object')
					.map(
						k =>
							k &&
							k.map(s => {
								if (s.tag === 'img') {
									let key = s.attrs[0].value;
									if (linkImageArr.has(key)) {
										let result = linkImageArr.get(key);
										imageData.push(result);
									} else {
										if (imageArr.has(key)) {
											let resultMapimageArr = imageArr.get(key);
											imageData.push(resultMapimageArr);
										}
										console.log(imageData);
									}
								}
							})
					);
				imageData.forEach((item, index) => {
					if (imageArr.has(item.url)) {
						imageData[index] = imageArr.get(item.url);
					}
				});

				return imageData;
			}
		},
		uploadPdf(file) {
			console.log('pdfSize: ', file);
			let name = file.name.substring(file.name.length - 3, file.name.length);
			let fileName = name.toLowerCase();
			if (fileName !== 'pdf') {
				this.$message.error('请上传PDF文件！');
				return false;
			}
			if (file.size > pdfMaxSize) {
				const size = Math.floor(pdfMaxSize / 1024 / 1024);
				this.$message.error(`请上传小于${size}M的文件！`);
				return false;
			}
			this.uploadStatus = 'progress';
			this.form.fileName = file.name;
			this.form.originalname = file.name;
			this.form.size = file.size;
		},
		removePdf(file) {
			if (file.status === 'success') {
				this.form.pdfList.splice(this.form.pdfList.indexOf(file.name), 1);
				console.log(this.form.pdfList);
				this.form.uploadPdfUrl = '';
				this.form.originalname = '';
			}
			if (!this.form.pdfList || this.form.pdfList.length <= 0) {
				this.form.uploadPdfUrl = '';
				// this.onChange('uploadPdfUrl');
			}
			this.form.originalname = '';
		},
		uploadSuccessPdf(response) {
			console.log('uploadSuccessPdf:', response);
			if (response.code === 200) {
				this.form.url = response.data.url;
				this.form.servletFileName = response.data.filename;
				this.form.pdfList.push({
					name: this.form.fileName,
					url: this.form.url
				});
				this.$message.success('PDF上传成功！');
				console.log('pdfList:', this.form.pdfList);
				// this.onChange('uploadPdfUrl');
				this.uploadStatus = 'done';
				this.form.fileName = response.data.filename;
				// 上传pdf
				this.$emit('input', this.prop, this.form);
				this.$emit('input', 'resource', { name: this.form.originalname, size: this.form.size, url: this.form.url, uploadPdfUrl: this.form.url });
			}
		},
		uploadErrorPdf(error) {
			this.form.uploadPdfUrl = '';
			this.form.originalname = '';
			this.form.servletFileName = '';
			this.form.size = 0;
			this.$message.error('上传失败！');
			console.log(error);
			this.uploadStatus = 'idle';
		},
		previewPdf(file) {
			window.open(file.url);
		},
		updateInput() {
			this.form.url = this.form.webUrl;
			this.form.fileName = '';
			this.form.originalname = '';
			this.$emit('input', 'resource', this.form);
			this.$emit('input', this.prop, this.form);
		},
		onchange() {},
		onAddVariable() {
			this.isShowUserAttribute = true;
		},
		onChosseUserAttribute(data, businessData) {
			let editor = this.$refs.wangEditorTextArea.editor || this.$refs.wangEditorTextArea[0].editor;
			if (editor) {
				if (data) {
					// editor.cmd.do('insertHTML', `{{${data.name}_${data.id}}}`); // formatVariable
					editor.cmd.do('insertHTML', this.formatVariable(data.name, data.id));
				}
				if (businessData) {
					// editor.cmd.do('insertHTML', `{{${businessData.name}_${businessData.id}}}`);
					editor.cmd.do('insertHTML', this.formatVariable(businessData.name, businessData.id));
				}
			}
			this.$emit('chooseUserAttribute', this.prop, data, businessData);
			this.isShowUserAttribute = false;
		},
		onCloseUserAttribute() {
			this.isShowUserAttribute = false;
		},
		// 初始化所有角色
		getVariablesAll() {
			const sceneId = JSON.parse(sessionStorage.getItem('sceneData'))?.id;
			let param = {
				scenId: sceneId,
				page: 1,
				pageSize: 10000
			};
			getVariablesAll(param)
				.then(res => {
					this.variablesList = res.data.data?.rows || [];
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 根据变量名格式化
		// 业务信息 变量名
		// 客户信息_角色名_变量名
		formatVariable(name, id) {
			const variable = this.variablesList.find(item => item.id === id);
			if (variable) {
				return variable.bizscenario_role ? `{{客户信息_${variable.bizscenario_role.name}_${name}_${id}}}` : `{{业务信息_${name}_${id}}}`;
			} else {
				return `{{${name}_${id}}}`;
			}
		},
		// 获取业务资料列表
		getBizMaterialList(type = 'video') {
			const sceneId = this.$route.query.bizscenariosId;
			getBusinessResourcesBySceneId(sceneId, type, { page: 1, pageSize: 100 })
				.then(res => {
					let data = res.data.data?.data;
					if (type === 'video') {
						this.videoUrls = data.filter(item => (item.content = item.content + '?token=' + localStorage.getItem(`zco_admin_token_${window.uid}`))) || [];
					} else {
						this.pdfUrls = data.filter(item => (item.content = item.content + '?token=' + localStorage.getItem(`zco_admin_token_${window.uid}`))) || [];
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		onVideoChange(value) {
			this.form.fileList = [];
			const video = this.videoUrls.find(item => item.content === value);
			const { content, fileName, fileSize, id } = video;
			this.form.fileList.push({ name: fileName, url: content, size: fileSize, id: id });
			this.form.fileName = fileName;
			this.form.originalname = fileName;
			this.form.size = fileSize;
			this.form.url = content;
			this.form.id = id;
			this.$emit('input', this.prop, this.form);
			this.$emit('input', 'resource', { name: this.form.originalname, size: this.form.size, url: content, id: id });
		},
		onPdfChange(value) {
			this.form.pdfList = [];
			const pdf = this.pdfUrls.find(item => item.content === value);
			const { content, fileName, fileSize, id } = pdf;
			this.form.pdfList.push({ name: fileName, url: content, size: fileSize, id: id });
			this.form.fileName = fileName;
			this.form.originalname = fileName;
			this.form.size = fileSize;
			this.form.url = content;
			this.form.servletFileName = fileName;
			this.form.id = id;
			this.$emit('input', this.prop, this.form);
			this.$emit('input', 'resource', { name: this.form.originalname, size: this.form.size, url: content, uploadPdfUrl: content, id: id });
		}
	}
};
</script>

<style lang="less">
.el-dialog__header {
	border-bottom: 1px solid #eee;
}
.el-dialog__footer {
	border-top: 1px solid #eee;
}
.send-message .el-dialog {
	border-radius: 4px;
	box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
}
.send-message .disable {
	pointer-events: none;
}
.send-message .el-dialog__body {
	padding: 10px 20px;
}
// /* .send-message .el-form-item__label {
// 	text-align: center;
// 	padding: 0;
// }
// .next-jump .el-form-item__label {
// 	text-align: left;
// } */
.send-message input {
	height: 32px;
}
.send-message {
	.send-content {
		.el-upload-list {
			padding: 10px 0px;
		}
	}
}
.send-message .el-form-item__content {
	line-height: 20px;
	margin: 0;
}

// .pdf-box .el-form-item__error {
// 	margin-top: -16px;
// }
.upload-conent .el-upload-list__item-name {
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 550px;
}
.send-message .el-form-item {
	margin-bottom: 20px;
}
.send-message {
	#wangeditor {
		.w-e-text-container {
			word-break: break-all;
		}
	}
}
</style>

<style scoped lang="less">
.send-message .dialog-title {
	text-align: left;
}

.cancel {
	color: #999;
	background: #fff;
}
.title {
	padding: 10px 0;
}
.title span {
	color: red;
}
.send-content {
	padding: 10px;
}
.el-radio-group {
	display: flex;
	flex-flow: column;
}
.el-radio {
	margin-right: 10px;
}
.el-select {
	width: 90%;
}
.upload-btn {
	border: 1px solid #d3d3d3;
	font-size: 12px;
	border-radius: 4px;
	box-sizing: border-box;
	padding: 0 16px;
	height: 32px;
	line-height: 32px;
}
.send-message-tips {
	padding: 4px 20px;
	color: #999;
	line-height: 20px;
	word-break: break-all;
}
.radio-desc {
	padding-top: 8px;
}
.radio {
	padding: 10px 0;
}
.next-jump {
	padding: 10px 0;
	text-align: left;
	margin-left: 24px;
}
.next-jump .el-select {
	width: 90%;
}
.wordage {
	position: relative;
	.textarea-btn {
		position: absolute;
		top: 2%;
		right: 10px;
		z-index: 20001;
		font-size: 16px;
	}
	.valdateBorder {
		border: 1px solid #f56c6c;
		.w-e-toolbar {
			border: none;
		}
		.w-e-text-container {
			border: none;
		}
		.w-e-toolbar {
			padding-right: 100px;
		}
	}
}
.upload-conent {
	text-align: left;
}
</style>
